Ir a INICIO en las entradas con efecto deslizante

Lo apliqué hace unos días en las entradas, lo descubrí en mis visitas a Vaganbundia y me pareció de gran utilidad.
J.Miur explica con lujo de detalles como hacerlo y como de costumbre nos regala una explicación para entender el funcionamiento.
El efecto subir a inicio se consigue añadiendo Prototype, y Scriptaculous dos librerías JavaScript y una tercera con las que podemos conseguir efectos fantásticos effects.js
Uno de ellos es añadir un efecto deslizamiento para ir a inicio desde cualquier entrada con un simple click.

Si encontráis problemas para la descarga podéis probar la descarga aquí es el zip con los tres archivos necesarios prototype.js, scriptaculous.js y effects.js una vez descargado abrimos el zip y extraemos los archivos que más tarde alojaremos en un servidor externo Google Pagges por ejemplo.

Una vez alojados los tres archivos nos ubicamos en plantilla edición de HTML y los añadimos antes de </head> de la siguiente forma.

<script src='URL-nuestro-archivo-prototype.js' type='text/javascript'/>
<script src='URL-nuestro-archivo-scriptaculous.js?load=effects' type='text/javascript'/>

En el primer scripts incluimos prototype.js en el segundo estamos incluyendo scriptaculous.js y el añadido ?load=effects para dar la orden a scriptaculous.js de que use effects.js

Si preferimos olvidarnos de buscar alojamiento de archivos podemos utilizar el scripts que Google proporciona para Prototype y Scriptaculous, es el siguiente:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Una vez añadidos los archivos en la plantilla nos ubicaremos antes de </head> y añadiremos lo siguiente:

<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function() {
$$('a[href^=#]:not([href=#])').each(function(element)
element.observe('click', function(event) {
new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
}.bindAsEventListener(element))
})
})
//]]>
</script>

Usar el efecto es muy sencillo donde deseamos que aparezca añadiremos:
<a href="#elNombre">ENLACE</a>

Donde ENLACE podemos poner un texto o una imagen, o los dos si lo deseamos

J.Miur nos explica que lo más sencillo es reemplazar elNombre por el ID de algún DIV de la plantilla. Por ejemplo, para ir al inicio de una página, podríamos poner:

<a href="#Blog1">ENLACE</a>

o bien

<a href="#outer-wrapper">ENLACE</a>

Si deseamos ir al final de la página sustituimos href="#outer-wrapper" y en su lugar añadimos href="#footer-wrapper" podemos ir a las etiquetas de la sidebar si añadimos href="#Label1"

Ya tenemos todo lo necesario para poder añadir el efecto deslizante, sólo nos falta decidir donde aplicarlo.
Para que apareciera en el footer de las entradas yo lo añadí marcando para expandir la plantilla de artilugios y situándome justo antes de :
<p class='post-footer-line post-footer-line-2'>

Es bueno recordar que:
<p class='post-footer-line post-footer-line-1'>
Contiene los datos de autor.

<p class='post-footer-line post-footer-line-2'>
Contiene las etiquetas.


<p class='post-footer-line post-footer-line-3'>
Suele emplearse para añadir marcadores sociales, entradas relacionadas y algún que otro complemento.

En una actualización J.Miur nos informa que si utilizamos en nuestra plantilla enlaces tipo <a herf="#"> puede ocasionar problemas con los efectos si eso ocurriera podemos eliminarlo y utilizar el mismo enlace para los efectos de forma que para ir a inicio añadiríamos:

<a
onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false' href="#outer-wrapper">
TEXTO / IMAGEN
</a>


Ver entrada original de Vagabundia.